<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords"  th:content="${@config.getKey('blog.index.keywords')}">
    <meta name="description" th:content="${@config.getKey('blog.index.description')}">
    <title th:text="${@config.getKey('blog.index.title')}"></title>
    <link rel="stylesheet" th:href="@{/ajax/libs/font-icon/icon.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:inline="javascript"> var ctx = [[@{/}]]; </script>
    <script th:src="@{/ajax/libs/layer/layer.js}"></script>
    <script th:src="@{/ajax/libs/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/laypage/laypage.js}"></script>
    <script th:src="@{/ajax/libs/toastr/toastr.min.js}"></script>
    <script th:src="@{/ajax/libs/hc-sticky.js}"></script>
    <script th:src="@{/ajax/libs/zplayer/js/zplayer.min.js}"></script>
</head>
<body>
<style>
    body {
        background: #001247;
    }

    .login-box-tap-2 p {
        height: 2.7vw;
        line-height: 2.7vw;
        text-align: center;
        font-size: 1vw;
    }


    .login-form {
        width: 15vw;
        max-width: 300px;
        height: auto;
        position: relative;
    }
    .login-form input {
        padding: 5px 10px;
        height: 2.1vw;
    }
    .login-form-group {
        margin: 1vw auto;
    }
    .capt-wrap{
        position: relative;
    }

    .captchaBox {
        position: absolute;
        top: 0;
        right: 0;
        height: 2.1vw;
        width: 27%;
    }
    .login-form-submit {
        margin-bottom:  1vw;
        width: 100%;
        height: 2.1vw;
        border-radius: .3vw;
        border: 0;
        background: #1472FF;
        color: #EBF2FF;
        font-size: .8vw;
    }

</style>
<div class="login" style="background-image: url(img/login/login2.jpg);">
    <div class="login__head" style="background-image: url(img/login/login-head.png)">
        <div class="login-title">
            <h2 text="" th:text="${@config.getKey('blog.index.title')}"></h2>
        </div>
    </div>
    <div class="login__body">
        <div class="login-box" style="background-image: url(img/login/login-box.png)">
            <div class="login-greet">欢迎登录</div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="vertical-center" style="height: 400px;">
                        <ul class="css3-carousel">
                            <li style="background-image: url(img/login/1.png);"></li>
                            <li style="background-image: url(img/login/2.png);"></li>
                            <li style="background-image: url(img/login/3.png);"></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-6 login-form-box">
                    <div class="vertical-center" style="height: 400px;">
                        <form id="signupForm" autocomplete="off" class="login-form">
                            <div class="login-form-group">
                                <input type="text" name="username" class="form-control"  placeholder="请输入用户名" required maxlength="11">
                            </div>
                            <div class="login-form-group">
                                <input id="password" type="password" name="password" class="form-control"  placeholder="请输入密码" required  maxlength="20">
                            </div>
                            <div class="login-form-group" th:if="${captchaEnabled==true}">
                                <div class="capt-wrap">
                                    <input type="text" name="validateCode" class="form-control"  placeholder="验证码"  style="width: 67%"  maxlength="5">
                                    <div class="captchaBox">
                                        <a href="javascript:void(0);" title="点击更换验证码">
                                            <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" height="100%" width="100%"/>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <button id="btnSubmit" data-loading="正在验证登录，请稍后..."  class="login-form-submit">立即登录</button>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="login__foot">
        <p><span  th:text="${@config.getKey('blog.copyright')}"></span></p>
    </div>
</div>
<div class="star-animation">
    <div class="star-animation0"></div>
    <div class="star-animation1"></div>
    <div class="star-animation2"></div>
</div>
<script th:inline="javascript">  var captchaType = [[${captchaType}]]; </script>
<!-- 全局js -->
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 验证插件 -->
<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.3.1}"></script>
<script src="../static/ruoyi/login.js" th:src="@{/ruoyi/login.js}"></script>
<!-- RSA加密 -->
<script src="../static/js/jsencrypt.js" th:src="@{/js/jsencrypt.js}"></script>

<script type="text/javascript">
    var video = document.getElementById('v1');
    video.playbackRate = 0.5;
    videoShow();
    function PlayVideo(id) {
        console.log("video.id===>", id);
        //console.log("dom", document.getElementById(id));
        var myPlayer = videojs(id, {
            bigPlayButton: false,
            textTrackDisplay: false,
            posterImage: true,
            errorDisplay: false,
            controlBar: false
        });
        console.log("muplayer===>", myPlayer);
        myPlayer.play();
    }

    function PlayVideoClick(dom) {
        console.log(dom);
        console.log(dom.dataset.info);
        var id = dom.dataset.info;
        if (VideoInstance) {
            VideoInstance.invokeMethodAsync('PlayVideo', id);
        }
    }

    var VideoInstance = null;
    function registerVideoInstance(objRef) {
        VideoInstance = objRef;
    }

    //按钮触发播放器，设置外层div 为 block显示
    function videoShow() {
        document.getElementById("loading-video").style.display = "block";
        document.getElementById("video").style.display = "block";
    }

    //关闭时，设置外层div、video为  none
    //设置视屏时间为0，这样下次打开不会继续播放
    function closeVideo() {
        document.getElementById("loading-video").style.display = "none";
        let myVideo = document.getElementsByTagName('video')[0];
        myVideo.currentTime=0;
        myVideo.pause();
    }
</script>
</body>

</html>

